<template>
  <div>
    <h3>Login</h3>
    <p>{{ count }}</p>

    <router-link :to="{
      path:'/home'
    } ">home</router-link>
    
    <hr>

    <button @click="count++">累加</button>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      count: 0,
    };
  },
  /*   
  路由组件内守卫:进入时
 */
  beforeRouteEnter(to, from, next) {
    // console.log(to, from, next);
    console.log("路由内进入时守卫");
    console.log(this); //undefined  原因: 此时实例未产生 
    next(() => {
      // console.log(this); // 此时可以访问到this
    });
  },
  

  /* 
  beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用
  */
  beforeRouteUpdate(to, from, next) {
    console.log("组件内更新时");
    console.log(to, from, next, "beforeRouteUpdate");
  },
};
</script>

<style></style>

